<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Css 变形</title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<body>
    <div class="container  cube-box">
        <h2>3D立方体</h2>
        <!-- <button id="start-cube" class="btn">开始变身</button>
        <button id="back-flat" class="btn">打回原形</button> -->
        <div class="cube">
            <div class="face bottom">bottom</div>
            <div class="face top">top</div>
            <div class="face left">left</div>
            <div class="face right">right</div>
            <div class="face front">front</div>
            <div class="face back">back</div>
        </div>
        <div class="buttons">
            <button id="btn-x">X轴旋转</button>
            <button id="btn-y">Y轴旋转</button>
        </div>

    </div>
    <script>
        var btnX = document.getElementById('btn-x');
        var btnY = document.getElementById('btn-y');
        var cube = document.querySelector('.cube');
        var container = document.querySelector('.container')
        var rotateX = 0;
        var rotateY = 0;
        var rotateable = false;
        var clickX = 0,
            clickY = 0;
        var mx = 0,
            my = 0;
        var startX = 0,
            startY = 0;

        btnX.onclick = function() {
            rotateX += 10
            cube.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
        }
        btnY.onclick = function() {
                rotateY += 10
                cube.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
            }
            /*方法1
container.addEventListener('mousedown', function(e) {
	clickX = e.clientX;
	clickY = e.clientY;
	rotateable = true
})

container.addEventListener('mouseup', function() {
	rotateable = false;
	startX = mx;
	startY = my

})

container.addEventListener('mousemove', function(e) {

	if (rotateable) {
		console.log('rotating')
		mx = e.clientX - clickX + startX;
		my = e.clientY - clickY + startY;
		cube.style.transform = `rotateX(${-my}deg) rotateY(${mx}deg)`
	}

})
*/
            //方法2
            // var mx = 0;
            // var my = 0;
            // container.addEventListener('mousedown', function(e) {
            //     rotateable = true
            // })

        // container.addEventListener('mouseup', function() {
        //     rotateable = false;

        // })

        // container.addEventListener('mousemove', function(e) {
        //     if (rotateable) {
        //         mx += e.movementX
        //         my += e.movementY
        //         cube.style.transform = `rotateX(${-my}deg) rotateY(${mx}deg)`
        //     }

        // })
        //方法3
        var mx = 0,
            my = 0;
        container.addEventListener('mousedown', function(e) {
            // var context = this;

            function rotate(e) {
                mx += e.movementX
                my += e.movementY
                cube.style.transform = `rotateX(${-my}deg) rotateY(${mx}deg)`
            };

            this.addEventListener('mousemove', rotate);
            this.addEventListener('mouseup', function() {
                // console.log(this)
                this.removeEventListener("mousemove", rotate)
            });
        })
    </script>
</body>

</html>